<!-- 开始节点配置 -->
<template>
  <el-form
    class="learun-form-config"
    label-width="96px"
    label-position="left"
    size="mini"
  >
    <el-form-item :label="$t('节点标识')">
      <el-input v-model="node.id" readonly></el-input>
    </el-form-item>

    <el-form-item :label="$t('下一审核人')">
      <el-switch :disabled="disabled" v-model="node.isNextAuditor"> </el-switch>
    </el-form-item>
    <el-form-item :label="$t('自定义标题')">
      <el-switch :disabled="disabled" v-model="node.isCustmerTitle">
      </el-switch>
    </el-form-item>
    <!--<el-form-item label="标题规则">
      <el-switch :disabled="disabled" v-model="node.isCustmerTitle">
      </el-switch>
    </el-form-item>-->

    <el-form-item :label="$t('允许作废')">
      <el-switch :disabled="disabled" v-model="node.isDelete"> </el-switch>
    </el-form-item>
    <el-form-item :label="$t('重建到驳回点')">
      <el-switch :disabled="disabled" v-model="node.isRejectBackOld">
      </el-switch>
    </el-form-item>
    <el-form-item :label="$t('通知策略')">
      <l-checkbox
        :disabled="disabled"
        v-model="node.messageType"
        :options="[
          { value: '1', label: this.$t('短信') },
          { value: '2', label: this.$t('邮箱') },
          { value: '3', label: this.$t('微信') },
          { value: '4', label: this.$t('站内消息') },
        ]"
      >
      </l-checkbox>
    </el-form-item>
    <el-divider>{{$t('表单添加')}}</el-divider>
    <div style="text-align: center;margin-bottom:16px;">
      <el-radio-group
        :disabled="disabled"
        v-model="node.formType"
        size="mini"
        @change="handleFormTypeChange"
      >
        <el-radio-button label="1">{{ $t('自定义表单') }}</el-radio-button>
        <el-radio-button label="2">{{ $t('系统表单') }}</el-radio-button>
      </el-radio-group>
    </div>

    <el-form-item label-width="0px">
      <l-wordprint-select
        v-model="node.formWrodPrintCode"
        :placeholder="$t('选择打印Word模版')"
        :disabled="disabled"
      />
    </el-form-item>
    <div v-show="node.formType === '1'">
      <el-form-item label-width="0px">
        <l-custmerform-select
          v-model="node.formCode"
          @change="custmerformChange"
          :disabled="disabled"
        >
        </l-custmerform-select>
      </el-form-item>
      <el-form-item label-width="0px">
        <l-select
          v-model="node.formVerison"
          :disabled="disabled"
          :options="formVerisons"
          @change="custmerformVerisonChange"
          :placeholder="$t('请选择表单版本')"
        >
        </l-select>
      </el-form-item>
      <el-form-item label-width="0px">
        <l-select
          v-model="node.formRelationId"
          :disabled="disabled"
          :options="node.formRelations"
          :placeholder="$t('请选择流程关联字段')"
        >
        </l-select>
      </el-form-item>
    </div>
    <div v-show="node.formType === '2'">
      <el-form-item label-width="0px">
        <el-input
          v-model="node.formUrl"
          :placeholder="$t('请输入PC端表单地址')"
          :readonly="disabled"
        >
        </el-input>
      </el-form-item>
      <el-form-item label-width="0px">
        <el-input
          v-model="node.formAppUrl"
          :placeholder="$t('请输入APP端表单地址')"
          :readonly="disabled"
        >
        </el-input>
      </el-form-item>
    </div>
    <el-divider>{{ $t('表单字段权限') }}</el-divider>
    <template v-if="node.formType === '1'">
      <l-table
        height="notset"
        :isShowNum="false"
        :columns="columns"
        :dataSource="node.authFields"
        ref="authField"
      >
        <template v-slot:required="scope">
          <el-switch
            v-model="scope.row.required"
            :disabled="disabled || scope.row.type == 'grid'"
          >
          </el-switch>
        </template>
        <template v-slot:isEdit="scope">
          <el-switch
            v-model="scope.row.isEdit"
            :disabled="disabled || scope.row.type == 'gridrequired'"
          >
          </el-switch>
        </template>
        <template v-slot:isLook="scope">
          <el-switch
            v-model="scope.row.isLook"
            :disabled="
              disabled ||
                scope.row.type == 'grid' ||
                scope.row.type == 'gridrequired'
            "
          >
          </el-switch>
        </template>
      </l-table>
    </template>
    <template v-else>
      <l-edit-table
        :addBtnText="$t('添加字段')"
        :dataSource="node.authFields"
        @addRow="handleAddAuthField"
        @deleteRow="handleDeleteAuthField"
      >
        <el-table-column prop="label" :label="$t('名称')" minWidth="100">
          <template slot-scope="scope">
            <el-input
              :readonly="disabled"
              size="mini"
              v-model="scope.row.label"
              :placeholder="$t('请输入')"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="field" :label="$t('字段')" minWidth="100">
          <template slot-scope="scope">
            <el-input
              :readonly="disabled"
              size="mini"
              v-model="scope.row.field"
              :placeholder="$t('请输入')"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="required" :label="$t('必填')" width="64">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.required" :disabled="disabled">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="isEdit" :label="$t('编辑')" width="64">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isEdit" :disabled="disabled">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="isLook" :label="$t('查看')" width="64">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.isLook" :disabled="disabled">
            </el-switch>
          </template>
        </el-table-column>
      </l-edit-table>
    </template>
  </el-form>
</template>

<script>
const apiForm = window.$api.custmerForm.scheme;

export default {
  name: "start-event-option",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      columns: [
        { label: "名称", prop: "label", minWidth: "100" },
        { label: "字段", prop: "field", minWidth: "100" },
        { label: "必填", prop: "required", width: "64", align: "center" },
        { label: "编辑", prop: "isEdit", width: "64", align: "center" },
        { label: "查看", prop: "isLook", width: "64", align: "center" },
      ],
      tableBtns: [{ prop: "Delete", label: this.$t("删除") }],
      formRelations: [],
    };
  },
  asyncComputed: {
    formVerisons: {
      async get() {
        let res = [];
        if (
          !this.$validatenull(this.node.formCode) &&
          this.node.formType == "1"
        ) {
          res = await this.$awaitWraper(
            apiForm.getHistoryList(this.node.formCode)
          );
        }
        return (res || []).map((t) => {
          return { label: this.lr_dateFormat(t.f_CreateDate), value: t.f_Id };
        });
      },
    },
  },
  computed: {
    node() {
      return this.wfdesign.currentWfNode;
    },
  },
  inject: ["wfdesign"],
  methods: {
    async custmerformChange(val) {
      this.$set(this.node, "formRelationId", "");
      if (val == null) {
        this.node.authFields = [];
        this.node.formVerison = "";
        return;
      }
      if (
        this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])
      ) {
        const { f_SchemeInfoId, f_Scheme, f_Id } =
          (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {};
        this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme };
        if (this.node.formCode == f_SchemeInfoId) {
          this.loadFormScheme(f_Scheme);
        }
      } else {
        this.loadFormScheme(
          this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme
        );
      }
      this.node.formVerison = val.f_SchemeId;
    },
    async custmerformVerisonChange(val) {
      this.$set(this.node, "formRelationId", "");
      if (this.$validatenull(val)) {
        this.node.authFields = [];
        return;
      }
      if (this.$validatenull(this.wfdesign.custmerformSchemes[val.value])) {
        const { f_Scheme, f_Id } =
          (await this.$awaitWraper(apiForm.getHistory(val.value))) || {};
        this.wfdesign.custmerformSchemes[f_Id] = { f_Scheme };
        if (this.node.formVerison == f_Id) {
          this.loadFormScheme(f_Scheme);
        }
      } else {
        this.loadFormScheme(
          this.wfdesign.custmerformSchemes[val.value].f_Scheme
        );
      }
    },
    loadFormScheme(strScheme) {
      const scheme = JSON.parse(strScheme);
      const fields = [];
      const rfields = [];
      scheme.formInfo.tabList.forEach((tab) => {
        tab.components.forEach((component) => {
          if (["guid"].includes(component.type)) {
            rfields.push({ label: component.label, value: component.prop });
          }

          if (
            !["gridtable", "divider"].includes(component.type) &&
            component.display
          ) {
            fields.push({
              prop: component.prop,
              field: component.field,
              label: component.label,
              table: component.table,
              required: component.required,
              isEdit: true,
              isLook: true,
            });
          } else if (
            ["divider"].includes(component.type) &&
            component.display
          ) {
            fields.push({
              prop: component.prop,
              label: `${this.$t("分割线")}-${component.label}`,
              required: false,
              isEdit: false,
              isLook: true,
            });
          } else if (["gridtable"].includes(component.type)) {
            fields.push({
              prop: `${component.prop}_add`,
              label: `${component.label || this.$t("表格")}-${this.$t("添加按钮")}`,
              required: false,
              isEdit: true,
              isLook: false,
              type: "grid",
            });
            fields.push({
              prop: `${component.prop}_remove`,
              label: `${component.label || this.$t("表格")}-${this.$t("删除按钮")}`,
              required: false,
              isEdit: true,
              isLook: false,
              type: "grid",
            });

            fields.push({
              prop: `${component.prop}_required`,
              label: `${component.label || this.$t("表格")}-${this.$t("数据")}`,
              required: component.required,
              isEdit: false,
              isLook: false,
              type: "gridrequired",
            });
            fields.push(
              ...component.children
                .filter((t) => t.display)
                .map((t) => {
                  return {
                    gridprop: component.prop,
                    prop: t.prop,
                    field: t.field,
                    label: `${component.label || this.$t("表格")}-${t.label}`,
                    table: component.table,
                    required: t.required,
                    isEdit: true,
                    isLook: true,
                  };
                })
            );
          }
        });
      });

      this.node.formRelations = rfields;
      this.node.authFields = fields;
    },
    handleFormTypeChange() {
      this.node.formCode = "";
      this.node.formUrl = "";
      this.node.formAppUrl = "";
      this.node.authFields = [];
      this.node.formRelations = [];

      this.$set(this.node, "formRelationId", "");
    },
    handleAddAuthField() {
      this.node.authFields.push({
        field: "",
        label: "",
        required: true,
        isEdit: true,
        isLook: true,
      });
    },
    handleDeleteAuthField({ index }) {
      this.node.authFields.splice(index, 1);
    },
  },
};
</script>
